<template>
  <div class="notifications-page">
    <div class="page-header">
      <div class="title-section">
        <h1 class="page-title">通知中心</h1>
        <el-tag type="info" class="count-tag">{{ filteredNotifications.length }} 条通知</el-tag>
      </div>
      <div class="actions">
        <el-button type="primary" @click="markAllAsRead" :disabled="!hasUnreadNotifications">
          <el-icon><Check /></el-icon>全部标记为已读
        </el-button>
        <el-button @click="clearAllNotifications" :disabled="!hasNotifications">
          <el-icon><Delete /></el-icon>清空所有通知
        </el-button>
      </div>
    </div>

    <el-card class="filter-card">
      <div class="filters">
        <div class="filter-group">
          <span class="filter-label">状态：</span>
          <el-radio-group v-model="filter" size="default">
            <el-radio-button value="all" label="全部"></el-radio-button>
            <el-radio-button value="unread" label="未读"></el-radio-button>
            <el-radio-button value="read" label="已读"></el-radio-button>
          </el-radio-group>
        </div>

        <div class="filter-group">
          <span class="filter-label">类型：</span>
          <el-select v-model="typeFilter" placeholder="通知类型" clearable>
            <el-option label="信息" value="info" />
            <el-option label="成功" value="success" />
            <el-option label="警告" value="warning" />
            <el-option label="错误" value="error" />
          </el-select>
        </div>

        <div class="search-group">
          <el-input
            v-model="searchQuery"
            placeholder="搜索通知内容"
            prefix-icon="Search"
            clearable
          />
        </div>
      </div>
    </el-card>

    <el-card class="notification-card">
      <el-empty v-if="filteredNotifications.length === 0" description="暂无通知" />

      <el-table
        v-else
        :data="filteredNotifications"
        style="width: 100%"
        row-key="id"
        @row-click="handleNotificationClick"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <el-table-column width="60">
          <template #default="{ row }">
            <el-tag
              :type="getTagType(row.type)"
              effect="plain"
              size="small"
              class="notification-tag"
            >
              <el-icon>
                <component :is="getTypeIcon(row.type)" />
              </el-icon>
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="title" label="标题" min-width="150">
          <template #default="{ row }">
            <div class="notification-title" :class="{ 'is-read': row.isRead }">
              {{ row.title }}
              <el-tag v-if="!row.isRead" size="small" type="danger" effect="plain">未读</el-tag>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="content" label="内容" min-width="300" show-overflow-tooltip />
        
        <el-table-column prop="time" label="时间" min-width="150" sortable />
        
        <el-table-column label="操作" width="300" align="left" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button 
                v-if="!row.isRead" 
                size="small" 
                plain
                @click.stop="markAsRead(row.id)"
              >
                <el-icon><Check /></el-icon>标为已读
              </el-button>
              
              <el-button 
                v-if="row.link" 
                size="small" 
                type="primary" 
                plain
                @click.stop="navigateTo(row.link)"
              >
                <el-icon><View /></el-icon>查看详情
              </el-button>
              
              <el-popconfirm
                title="确定删除这条通知吗？"
                @confirm="removeNotification(row.id)"
                width="200"
                confirm-button-type="danger"
              >
                <template #reference>
                  <el-button 
                    size="small" 
                    type="danger" 
                    plain
                    @click.stop
                  >
                    <el-icon><Delete /></el-icon>删除
                  </el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useNotificationStore } from '@/store/notification'
import { Notification } from '@/types/notification'
import { ElMessageBox } from 'element-plus'
import { 
  InfoFilled, 
  SuccessFilled, 
  WarningFilled, 
  CircleCloseFilled,
  Check,
  Delete,
  View
} from '@element-plus/icons-vue'

const router = useRouter()
const notificationStore = useNotificationStore()

// 筛选条件
const filter = ref('all')
const typeFilter = ref('')
const searchQuery = ref('')

// 根据筛选条件获取通知列表
const filteredNotifications = computed(() => {
  return notificationStore.notifications.filter(notification => {
    // 读取状态筛选
    if (filter.value === 'unread' && notification.isRead) {
      return false
    }
    
    if (filter.value === 'read' && !notification.isRead) {
      return false
    }
    
    // 类型筛选
    if (typeFilter.value && notification.type !== typeFilter.value) {
      return false
    }
    
    // 搜索筛选
    if (searchQuery.value) {
      const query = searchQuery.value.toLowerCase()
      return (
        notification.title.toLowerCase().includes(query) ||
        notification.content.toLowerCase().includes(query)
      )
    }
    
    return true
  })
})

const hasNotifications = computed(() => notificationStore.notifications.length > 0)
const hasUnreadNotifications = computed(() => notificationStore.unreadCount > 0)

// 获取通知类型对应的图标
const getTypeIcon = (type: string) => {
  switch (type) {
    case 'success': return SuccessFilled
    case 'warning': return WarningFilled
    case 'error': return CircleCloseFilled
    default: return InfoFilled
  }
}

// 获取通知类型对应的标签类型
const getTagType = (type: string) => {
  switch (type) {
    case 'success': return 'success'
    case 'warning': return 'warning'
    case 'error': return 'danger'
    default: return 'info'
  }
}

// 处理通知点击
const handleNotificationClick = (notification: Notification) => {
  markAsRead(notification.id)
  
  if (notification.link) {
    navigateTo(notification.link)
  }
}

// 标记为已读
const markAsRead = (id: number) => {
  notificationStore.markAsRead(id)
}

// 标记全部为已读
const markAllAsRead = () => {
  notificationStore.markAllAsRead()
}

// 删除通知
const removeNotification = (id: number) => {
  notificationStore.removeNotification(id)
}

// 清空所有通知
const clearAllNotifications = () => {
  ElMessageBox.confirm('确定要清空所有通知吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    notificationStore.clearAll()
  }).catch(() => {})
}

// 跳转到链接
const navigateTo = (link: string) => {
  router.push(link)
}
</script>

<style scoped>
.notifications-page {
  padding: 20px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-section {
  display: flex;
  align-items: center;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  margin-right: 12px;
}

.count-tag {
  font-size: 14px;
}

.filter-card {
  margin-bottom: 20px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.filter-group {
  display: flex;
  align-items: center;
}

.filter-label {
  margin-right: 8px;
  color: var(--el-text-color-regular);
  font-weight: 500;
}

.search-group {
  flex: 1;
  min-width: 250px;
  max-width: 350px;
  margin-left: auto;
}

.notification-card {
  margin-bottom: 20px;
}

.notification-title {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.notification-title.is-read {
  font-weight: normal;
  opacity: 0.8;
}

.notification-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
  padding: 0;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

:deep(.el-table__row) {
  cursor: pointer;
}

:deep(.el-table__row:hover) {
  background-color: var(--el-fill-color-light);
}
</style> 